<template>
  <div class="top">
    <el-card>
      <div>
        <el-form :inline="true">
          <el-form-item><el-input placeholder="请输入教师名称" v-model="keyword"></el-input></el-form-item>
          <el-form-item><el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button></el-form-item>
        </el-form>
      </div>
      <div class="add">
        <el-button type="success" @click="handleAdd" icon="el-icon-plus">添加</el-button>
      </div>
    </el-card>
    <el-card>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
     <el-table-column fixed label="序号" align="center">
            <template slot-scope="scope">{{scope.$index + 1 }}</template>
    </el-table-column>
    <el-table-column label="工号" align="center" property="workNum"></el-table-column>
    <el-table-column label="教师名" align="center" property="teacherName"></el-table-column>
    <el-table-column label="性别" align="center" property="Sex" ></el-table-column>
    <el-table-column label="身份证号码" align="center" property="IDnumber"></el-table-column>
    <el-table-column label="学院号" align="center" property="collageNum" ></el-table-column>
    <el-table-column label="手机号" align="center" property="Phone" ></el-table-column>
    <el-table-column label="QQ号码" align="center" property="qq" ></el-table-column>
    <el-table-column label="微信号码" align="center" property="WeChat" ></el-table-column>
    <el-table-column label="家庭地址" align="center" property="adress"></el-table-column>
    <el-table-column label="操作" fixed="right" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
   <div>
        <el-dialog  :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="formDemo">
            <el-form-item label="工号:" :label-width="formLabelWidth" prop="workNum" v-show="false">
              <el-input v-model="form.workNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="教师名:" :label-width="formLabelWidth" prop="teacherName">
              <el-input v-model="form.teacherName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别:" :label-width="formLabelWidth" prop="Sex"> 
               <el-radio v-model="form.Sex" label=true>男</el-radio>
                <el-radio v-model="form.Sex" label=false>女</el-radio>
            </el-form-item>
            <el-form-item label="身份证号码:" :label-width="formLabelWidth" prop="IDnumber">
              <el-input v-model="form.IDnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学院号:" :label-width="formLabelWidth" prop="collageNum">
              <el-input v-model="form.collageNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号:" :label-width="formLabelWidth" prop="Phone">
              <el-input v-model="form.Phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="QQ号码:" :label-width="formLabelWidth" prop="qq">
              <el-input v-model="form.qq" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="微信号码:" :label-width="formLabelWidth" prop="WeChat">
              <el-input v-model="form.WeChat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="家庭地址:"  :label-width="formLabelWidth" prop="adress">
              <el-input v-model="form.adress" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
    <div>
        <el-pagination
            :current-page="pager.pageIndex"
            :page-size="pager.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.rowsTotal"
            background
        >
        </el-pagination>
    </div>
  </div>  
</template>

<script>
import {GetTeacherList,UpdateTeacher} from "@/api/teacherapi"
export default{
    data(){
        return{
            keyword:'',
            tableData:[],
            dialogFormVisible: false,
            formLabelWidth:"120px",
            form:{},
            rules:{
        teacherName:[
        {
            required: true,
            trigger: "blur",
            message: "请输入教师姓名",
        },
        ],
        Sex:[
        {
            required: true,
            trigger: "blur",
            message: "请输入身份证号码",
        },
        ],
        sex:[
        {
            required: true,
            trigger: "blur",
            message: "请选择性别",
        },
        ],
        IDnumber:[
        {
            required: true,
            trigger: "blur",
            message: "请输入学院号",
        },
        ],
        Phone:[
        {
            required: true,
            trigger: "blur",
            message: "请输入手机号码",
        },
        ],
         qq:[
        {
            required: true,
            trigger: "blur",
            message: "请输入QQ号码",
        },
        ],
         WeChat:[
        {
            required: true,
            trigger: "blur",
            message: "请输入微信号码",
        },
        ],
         adress:[
        {
            required: true,
            trigger: "blur",
            message: "请输入家庭地址",
        },
        ],
      },
            pager:{
            pageIndex:1,
            rowsTotal:100,
      },
        }
    },
    mounted() {
    this.GetList();
  },
    methods:{
      GetList(){
          GetTeacherList().then((res)=>{
                 console.log(res);
                 this.tableData = res.data;
          })
      },
        handleQuery(){
          if(this.keyword == ""){
            this.$message.warning("查询条件不能为空");
            this.keyword = "";
            return
          }
          console.log("你输入的查询条件:"+this.keyword);
        },
        handleAdd(){
            this.dialogFormVisible = true;
        },
        handleEdit(){
            this.dialogFormVisible = true;
            // UpdateTeacher().then((res=>{
              
            // }))
            
        },
        handleCancel() {
        this.dialogFormVisible = false;
        },
        handleSave() {
      this.dialogFormVisible = false;
    },
    }
}

</script>
<style scoped>
.top {
  width: 100%;
  height: 100%;
}
</style>

<style>
.el-card__body {
  display: flex;
  justify-content: space-between;
}
.el-form-item__label{
  font-size: 18px;
  font-weight: bolder;
}
</style>
